<template>
  <wd-card custom-title-class="p-2!" custom-footer-class="p-2!">
    <view v-if="address" class="flex items-center">
      <view class="flex" @click="emits('select', address.id)">
        <wd-icon v-if="!delBtn" name="location" size="22px" class="mr-3 text-neutral-9"></wd-icon>
        <view class="flex flex-col">
          <view class="flex">
            <text class="text-neutral-9 mr-2">{{ address.name }}</text>
            <text>{{ address.phone }}</text>
          </view>
          <text class="text-xs">
            {{ address.province }}{{ address.city }}{{ address.district }} {{ address.detail }}
          </text>
        </view>
      </view>
      <!-- 删除按钮 -->
      <wd-icon
        v-if="delBtn"
        name="delete"
        size="22px"
        class="ml-auto text-red-6"
        @click="emits('del', address.id)"
      ></wd-icon>
    </view>
    <view v-else>
      <text class="text-neutral-9">暂无地址</text>
    </view>
  </wd-card>
</template>

<script lang="ts" setup>
const emits = defineEmits(['del', 'select'])
const props = withDefaults(
  defineProps<{
    address?: IAddress
    delBtn?: boolean
  }>(),
  {
    delBtn: false,
  },
)
</script>

<style lang="scss" scoped>
//
</style>
